<template>
	<view>

		<!-- 推荐返利 区域 -->
		<view class="rebate_area" v-if="rrGoodsShow">
			<!-- 已参与  -->
			<view class="Participated" v-if="rr_goods.is_join == 1 && !rr_goods.activity_rebate_pages">
				<view class="pated_content flex row-between">
					<view class="pated_val flex-col row-center">
						<view class="vals">
							<view class="num">
								{{rr_goods.visit || 0}}
							</view>
							<view class="txt">{{$zhTran('次')}}</view>
						</view>
						<view class="tit">{{$zhTran('分享浏览量')}}</view>
					</view>
					<view class="pated_val flex-col row-center">
						<view class="vals ">
							<view class="num">
								{{rr_goods.share_times || 0}}
							</view>
							<view class="txt">{{$zhTran('人')}}</view>
						</view>
						<view class="tit">{{$zhTran('成功邀请')}}</view>
					</view>
					<view class="pated_val flex-col row-center">
						<view class="vals ">
							<view class="num">
								{{rr_goods.share_rebate_amount || 0}}
							</view>
							<view class="txt">{{$zhTran('元')}}</view>
						</view>
						<view class="tit">{{$zhTran('返现收益')}}</view>
					</view>
				</view>
				<view class="pated_btns flex row-between">
					<view class="Tbtns flex row-center" @click="LookDetali">{{$zhTran('查看详情')}}</view>
					<view class="Tbtns flex row-center style2" @click="partishareshow = true">{{$zhTran('立即分享')}}</view>
				</view>
			</view>
			<!-- 未参与 -->
			<view class="Notparti flex row-between" v-else>
				<view class="parti_left" style="width: calc(100% - 140rpx);">
					<view class="ptitle flex">
						<view class="tit" style="font-size: 32rpx;">{{$zhTran(rr_goods.activity_rebate_title||'推荐返利')}}
						</view>
						<view class="add_btn flex row-center" @click="ruleShow = true">
							{{$zhTran(rr_goods.activity_rebate_btn||'立即参与')}}<i class="iconfont icon-imore"></i>
						</view>
					</view>
					<view class="ptxt">{{$zhTran(rr_goods.activity_rebate_desc||'参与活动，获得返现')}}
					</view>
				</view>
				<view class="parti_right text-center" style="width: 300rpx;">
					<view class="countdown_txt">{{$zhTran('距活动结束仅剩')+(rr_day || 0)+$zhTran('天')}}</view>
					<view class="countdown_time flex row-center">
						<count-down :dayshow="false" :height="52" bgColor="rgba(255, 255, 255, 0.2)" color="#fff"
							separatorColor="#fff" separator="colon" :time-end="rr_goods.end_time" />
					</view>
				</view>

			</view>
		</view>
		<!-- 弹出 -->
		<u-popup v-model="ruleShow" mode="center" :custom-style="rulestyle">
			<view class="rule_area">
				<view class="rule_content">
					<view class="rule_title flex row-center">
						<view class="rule_line flex-col row-center col-bottom">
							<view class="line1"></view>
							<view class="line2"></view>
							<view class="line1"></view>
						</view>
						<view class="tit">{{$zhTran('推荐返利活动规则')}}</view>
						<view class="rule_line ">
							<view class="line1"></view>
							<view class="line2"></view>
							<view class="line1"></view>
						</view>
					</view>
					<!--  -->
					<view class="rule_list">
						<view class="rule_items flex">
							<view class="items_tit">{{$zhTran('返利条件')}}</view>
							<view class="txt_item">
								<view class="rtxt" v-if="rr_goods.rebate_type == 0">
									{{$zhTran('好友下单购买此商品满 ')}}<text>{{rr_goods.rebate_goods_amount || 0}}</text>{{$zhTran(' 元')}}
								</view>
								<view class="rtxt" v-else-if="rr_goods.rebate_type == 1">
									{{$zhTran('好友下单购买此商品销售数量达到 ')}}<text>{{rr_goods.rebate_goods_number || 0}}</text>
								</view>
								<view class="rtxt" v-else-if="rr_goods.rebate_type == 2">
									{{$zhTran('好友下单购买此商品订单数量达到 ')}}<text>{{rr_goods.rebate_order_count || 0}}</text>{{$zhTran(' 单')}}
								</view>
								<view class="rtxt">
									{{$zhTran('即可获得 ')}}<text>{{rr_goods.rebate_amount || 0}}</text>{{$zhTran(' 元返现')}}
								</view>
							</view>
						</view>

						<template v-if="rr_goods.goods_number_limit">
							<!-- 有解锁条件 -->
							<view class="rule_items flex">
								<view class="items_tit">{{$zhTran('活动解锁条件')}}</view>
								<view class="txt_item flex-1">
									<view class="rtxt">
										{{$zhTran('购买本商品满')}}<text>{{rr_goods.goods_number_limit || ''}}</text>{{$zhTran(' 件')}}
									</view>
									<view class="rtxt">{{$zhTran('即可解锁活动！')}}</view>
								</view>
								<view class="lock_btn flex row-center" @click="fn_joinActiv(1)">{{$zhTran('立即参与')}}
								</view>
							</view>
						</template>


					</view>
					<!-- 无解锁条件 -->
					<view class="patein_btn flex row-center" @click="fn_joinActiv" v-if="!rr_goods.goods_number_limit">
						{{$zhTran('立即参与')}}
					</view>
					<view class="Activities_time">
						{{$zhTran('活动结束时间：')+(rr_goods.end_time_desc || '')}}
					</view>
				</view>
				<view class="rule_close flex row-center">
					<view class="close_btn flex row-center" @click="ruleShow = false">
						<u-icon name="close" color="#fff" size="32"></u-icon>
					</view>
				</view>

			</view>

		</u-popup>

		<sharearea :show.sync="partishareshow" :rra_id="rr_goods.id" :goods_id="rr_goods.goods_snap.id"
			:options="options"></sharearea>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		apijoinActivity,
	} from '@/api/rebate'
	import {
		apiMnpQrCodeRra,
	} from "@/api/app";
	import sharearea from "@/bundle2/components/sharearea.vue";

	export default {
		components: {
			sharearea,
		},
		props: {
			goods_id: {
				type: String,
				default: '',
			},
			rr_goods: {
				type: Object,
				default: {},
			},
			goodsInfo: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				rr_day: 0, // 剩余天数
				partishareshow: false,
				// 活动解锁条件
				isparti: false, // 推荐返利是否参与
				ruleShow: false, // 推荐返利活动规则 弹出
				rulestyle: {
					'background': 'none'
				},
				rr_poster: '', // 分享海报图片
				list: [{
					text: this.$zhTran('转发分享'),
					color: 'rgba(56, 56, 56, 1)',
					fontSize: 28,
					icon: 'share',
					iconColor: '#fff',
					iconSize: 32,
					iconBgColor: 'rgba(64, 115, 250, 1)',
					iconBgSize: 64,
					iconCircleColor: 'rgba(242, 246, 255, 1)',
					iconCircleSize: 138,
					share: 1 //转发好友
				}, {
					text: this.$zhTran('分享海报'),
					color: 'rgba(56, 56, 56, 1)',
					fontSize: 28,
					icon: 'photo',
					iconColor: '#fff',
					iconSize: 32,
					iconBgColor: 'rgba(51, 175, 41, 1)',
					iconBgSize: 64,
					iconCircleColor: 'rgba(246, 252, 248, 1)',
					iconCircleSize: 138,
					share: 0,
				}],
				shareShow: false,
				loading: false,
				options: {
					avatar: '',
					user_name: '',
					good_name: '',
					share_image: '',
					qr_code: ''
				},
				imgPath: '',
				sharePosterVisible: false,
			}
		},
		computed: {
			rrGoodsShow() {
				return this.rr_goods == '' || Object.keys(this.rr_goods).length == 0 ? false : true
			}
		},
		watch: {
			rr_goods() {
				this.setDatas()
			},
		},
		created() {
			this.setDatas()

		},
		methods: {
			setDatas() {
				console.log(this.userInfo, 'userInfo')
				// 推荐返利活动
				this.rr_day = this.setresidueday(this.rr_goods.end_time_desc)

				this.options = {
					avatar: this.userInfo.avatar || '',
					user_name: this.userInfo.nickname || '',
					good_name: this.goodsInfo.goods_name,
					share_image: this.rr_goods.poster || '',
					qr_code: ''
				}

			},
			actionSheet(event) {
				if (event === 1) {
					this.shareShow = false

					this.loading = true

					this.options = {
						avatar: this.userInfo.avatar || '',
						user_name: this.userInfo.nickname || '',
						good_name: this.goodsInfo.goods_name,
						share_image: this.rr_goods.poster || '',
						qr_code: ''
					}
					this.options = this.$zhTran(this.options)
					this.getRebatePoster()
				}
			},
			async getRebatePoster() {
				if (!this.isLogin) return this.$Router.push('/bundle2/pages/login/login')
				uni.showLoading({
					title: this.$zhTran('正在生成中')
				})

				try {
					const res = await Promise.all([
						// #ifdef MP-WEIXIN
						apiMnpQrCodeRra({
							rra_id: this.rr_goods.id, //	Integer	必填，非空	活动id
							goods_id: this.goods_id, //	Integer	必填，非空	商品id
						})
						// #endif
					]);
					console.log('res', res)
					// #ifdef MP-WEIXIN
					this.options.qr_code = res[0]?.qr_code;
					// #endif
					console.log('options', this.$refs)
					this.$nextTick(() => {
						this.$refs.rebatePoster.drawCanvas();
					})
				} catch (e) {
					console.log(e)
					this.handleFail()
				} finally {
					this.loading = false
				}
			},
			handleSuccess(val) {
				uni.hideLoading()
				console.log('handleSuccess', this.imgPath, val)
				this.imgPath = val;
				this.sharePosterVisible = true
				this.loading = false
			},
			handleFail() {
				uni.hideLoading({
					success: () => {
						this.$toast({
							title: this.$zhTran('生成失败')
						})
					}
				})
			},
			handleComplete() {
				console.log('handleComplete')
				this.loading = false
			},
			saveImageToAlbum() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.imgPath,
					success: (res) => {
						this.$toast({
							title: this.$zhTran("保存成功"),
						});
					},
					fail: (err) => {
						this.$toast({
							title: this.$zhTran("保存失败"),
						});
					},
				});
				// #endif
				// #ifdef H5
				this.$toast({
					title: this.$zhTran("请长按图片保存"),
				});
				// #endif
			},
			cancelShare() {
				this.sharePosterVisible = false
			},
			// 查看详情
			LookDetali() {
				let id = this.rr_goods.id || ''
				uni.navigateTo({
					url: `/bundle2/pages/rebate/activdetail?id=${id}`
				})
			},
			// 剩余天数
			setresidueday(str) {
				const setTime = new Date(str);
				const nowTime = new Date();
				const restSec = setTime.getTime() - nowTime.getTime();
				const day = parseInt(restSec / (60 * 60 * 24 * 1000));
				return day
			},
			// 参加返利活动 this.rr_goods ? this.rr_goods.id :
			fn_joinActiv() {
				if (!this.rr_goods) return;
				if (this.rr_goods.can_join == 1) { // 满足条件

					apijoinActivity({
							rra_id: this.rr_goods.id,
						})
						.then((data) => {
							uni.showToast({
								title: data.msg,
								icon: 'none',
								duration: 2000,
							})
							setTimeout(() => {
								this.ruleShow = false
								this.$emit('reload')
							}, 200)
						})
						.catch((err) => {
							console.log(err);
						});
				} else { // 不满足
					uni.showModal({
						title: this.$zhTran('提示'),
						content: this.$zhTran('您还不满足返利条件'),
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								this.ruleShow = false
								this.$emit('notsati')
							}
						}
					})

				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.rebate_area {}

	.Notparti {
		width: 100%;
		height: 156rpx;
		background: linear-gradient(90deg, rgba(238, 14, 38, 1) 0%, rgba(238, 14, 38, 1) 30%, rgba(255, 141, 26, 1) 100%);
		padding: 0 40rpx;

		.parti_left {
			.ptitle {
				.tit {
					font-size: 40rpx;
					font-weight: 700;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					vertical-align: top;
				}
			}

			.add_btn {
				width: 152rpx;
				height: 44rpx;
				border-radius: 200rpx;
				background: linear-gradient(180deg, rgba(244, 223, 98, 1) 0%, rgba(255, 185, 64, 1) 67.36%);
				margin-left: 6rpx;


				font-size: 24rpx;
				font-weight: 500;
				color: rgba(239, 21, 37, 1);
				text-align: left;
				vertical-align: top;

				i {
					color: rgba(239, 21, 37, 1);
					font-size: 30rpx;
				}
			}

			.ptxt {
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.64);
				text-align: left;
				vertical-align: top;
				margin-top: 10rpx;
			}
		}

		.parti_right {
			.countdown_txt {
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				vertical-align: top;
				margin-bottom: 15rpx;

				font-size: 24rpx;

			}

			.countdown_time {
				.symbol {
					font-size: 20rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					vertical-align: top;
					padding: 0 8rpx;
				}

				.time_item {
					width: 52rpx;
					height: 50rpx;
					border-radius: 4rpx;
					background: rgba(255, 255, 255, 0.2);

					font-size: 24rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					text-align: left;
					vertical-align: top;

				}
			}
		}
	}


	.Participated {
		width: 100%;
		height: 314rpx;
		background: url("../static/images/pated.jpg") no-repeat;
		background-size: cover;
		padding: 50rpx 36rpx 0 36rpx;

		.pated_content {
			width: 100%;
			height: 150rpx;
			padding: 0 30rpx;

			.pated_val {

				.vals {
					text-align: center;

					.num {
						font-size: 36rpx;
						font-weight: 550;
						color: rgba(238, 10, 37, 1);
						text-align: left;
						vertical-align: bottom;
						display: inline-block;
					}

					.txt {
						display: inline-block;
						font-size: 20rpx;
						font-weight: 400;
						color: rgba(238, 10, 37, 1);
						text-align: left;
						vertical-align: bottom;
						margin-bottom: 6rpx;
					}
				}

				.tit {
					margin-top: 4rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(38, 38, 38, 1);
					text-align: left;
					vertical-align: top;

				}
			}
		}

		.pated_btns {
			margin-top: 18rpx;
			width: 100%;

			.Tbtns {
				width: 328rpx;
				height: 66rpx;
				border-radius: 200rpx;
				background: rgba(255, 255, 255, 0.24);
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				text-align: left;
				vertical-align: top;

			}

			.Tbtns.style2 {
				background: linear-gradient(180deg, rgba(254, 201, 33, 1) 0%, rgba(255, 142, 28, 1) 100%);

			}
		}

	}

	.rule_area {
		// height: 568rpx;
	}

	.rule_content {
		width: 680rpx;
		min-height: 568rpx;
		border-radius: 20rpx;
		background: linear-gradient(180deg, rgba(255, 88, 51, 1), rgba(238, 14, 38, 1));
		border: 2rpx solid rgba(255, 198, 186, 0.44);
		padding: 48rpx 30rpx;


		.rule_title {
			width: 100%;
			margin-bottom: 50rpx;

			.rule_line {
				.line1 {
					width: 40rpx;
					height: 4rpx;
					background: rgba(204, 204, 204, 1);
				}

				.line2 {
					width: 48rpx;
					height: 4rpx;
					background: rgba(204, 204, 204, 1);
					margin: 4rpx 0;
				}
			}

			.tit {
				margin: 0 16rpx;
				font-size: 40rpx;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
				text-align: left;
				vertical-align: top;

			}
		}

		.rule_list {
			.rule_items:last-of-type {
				margin-bottom: 0;
			}

			.rule_items {
				width: 100%;
				margin-bottom: 34rpx;
				height: 222rpx;
				background: url("../static/images/rulebg.png") no-repeat;
				background-size: cover;
				padding: 0 36rpx 0 60rpx;
				padding-top: 54rpx;
				position: relative;

				.items_tit {
					top: 0;
					left: 0;
					font-size: 28rpx;
					font-weight: 550;
					color: rgba(38, 38, 38, 1);
					text-align: center;
					vertical-align: top;
					width: 100%;
					position: absolute;
					margin-top: 6rpx;
				}

				.txt_item::before {
					content: '';
					display: inline-block;
					width: 12rpx;
					height: 12rpx;
					border-radius: 100%;
					background: rgba(38, 38, 38, 0.34);
					position: absolute;
					top: 12rpx;
					left: -30rpx;
				}

				.txt_item {
					position: relative;
					width: 100%;

					.rtxt {
						/** 文本1 */
						font-size: 28rpx;
						font-weight: 550;
						color: rgba(38, 38, 38, 1);
						margin-bottom: 10rpx;

						text {
							/** 文本2 */
							font-size: 28rpx;
							font-weight: 550;
							color: rgba(239, 21, 37, 1);
							margin: 0 4rpx;
							display: inline-block;
						}
					}

					.rtxt:last-of-type {
						margin-bottom: 0;
					}
				}


			}
		}

		.patein_btn {
			width: 100%;
			height: 84rpx;
			border-radius: 200rpx;
			background: linear-gradient(180deg, rgba(255, 252, 248, 1) 0%, rgba(254, 213, 145, 1) 100%);
			/** 文本1 */
			font-size: 32rpx;
			font-weight: 550;
			color: rgba(239, 17, 38, 1);
			text-align: left;
			vertical-align: top;
			margin-top: 22rpx;
		}

		.Activities_time {
			width: 100%;
			margin-top: 38rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			vertical-align: top;

		}
	}

	.lock_btn {
		width: 182rpx;
		height: 72rpx;
		border-radius: 200rpx;
		background: linear-gradient(180deg, rgba(255, 88, 51, 1) 0%, rgba(238, 14, 38, 1) 100%);
		font-size: 30rpx;
		font-weight: 550;
		color: rgba(255, 255, 255, 1);
		text-align: left;
		vertical-align: top;

	}

	.rule_close {
		width: 100%;
		margin-top: 56rpx;

		.close_btn {
			width: 84rpx;
			height: 84rpx;
			border-radius: 100%;
			background: rgba(255, 255, 255, 0.44);
		}
	}
</style>